<template>
    <div class="login-box">
        <el-row>
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <img src="../assets/imgs/login_img.png" alt />
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light">
                    <el-card class="box-card">
                        <div class="head-img">
                            <img src="../assets/imgs/jd.png" class="img-title" alt="">
                        </div>
                        <el-form ref="form" :model="user" :rules="$rules.user"  >
                            <el-form-item class="head-title">电商后台管理系统</el-form-item>
                            <el-form-item prop="username">
                                <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="user.username"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input prefix-icon="el-icon-lock" show-password placeholder="请输入密码" v-model="user.password"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary"  style="width:410px" @click="goLogin()">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <Vcode :show="isShow" @success="doLogin()" ></Vcode>
    </div>
</template>
<script>
import Vcode from 'vue-puzzle-vcode'
import until from '../until'
export default {
    components:{
        Vcode
    },
    data(){
        return{
            user:{
                username:"",
                password:""
            },
            isShow:false
        }
    },
    methods:{
    async    goLogin(){
                try {
                    await this.$refs.form.validate();
                    this.isShow=true;
                } catch (error) {
                    console.log(error)
                }
        },
    async     doLogin(){
        try {
            this.isShow=false;
            let user= await this.$api.logining(this.user)
            if(user){
                until.addUser(user);
                this.$router.push({name:'users'})
            }

        } catch (error) {
            console.log(error);
        }
    }
    },
 
}
</script>
<style lang="less" scoped>
.login-box {
    height: 100%;
    background-color: @loginpage;
    display: flow-root;
}
.el-row {
    position: relative;
    top: 50%;
    transform: translate(0px, -50%);
    .el-col:first-child{
        padding-right: 20px;
    }
    .el-col:last-child{
        padding-left: 20px;
    }
}
.el-col {
    height: 400px;
    img {
        height: 100%;
    }
}
.el-row div:first-child {
    text-align: right;
}

.el-card {
    text-align: center;
    position: relative;
    left: 10px;
    top: 50px;
    width: 450px;
    height: 350px;
    overflow: unset;
    ::v-deep {
        .el-card__body {
            padding-top: 60px;
        }
    }
}
.head-img {
    width: 150px;
    height: 150px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: -90px;
    left: 150px;
    border: 6px solid @loginpage;
}
.el-form-item{
        ::v-deep {
        .el-form-item__content {
            font-size: 20px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            padding-bottom: 10px;
        }
    }
}
.head-title{
    margin-top: 20px;
    text-align: center;
}
.img-title{
    text-align: center;
    width: 90%;
    height: 90%;
    position: absolute;
    left: 0px;
    top:5px;
}
</style>